<div class="alert alert-block alert-success">
    <a class="close" data-dismiss="alert" href="#">×</a>
    <h4 class="alert-heading"><i class="fa fa-check-square-o"></i> 系统菜单管理!</h4>
    <p>后端配置系统操作界面入口访问地址</p>
</div>

<section id="widget-grid" class="">
    <div class="row">
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="jarviswidget" id="wid-id-1" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-deletebutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-comments"></i> </span>
                    <h2>检索条件 </h2>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="smart-form" novalidate="novalidate">
                            <fieldset>
                                <div class="row">
                                    <section class="col col-4">
                                        <label class="input"> <i class="icon-prepend fa fa-user"></i>
                                            <input id="requestUrl" type="text" name="requestUrl" placeholder="请求地址">
                                        </label>
                                    </section>
                                </div>
                            </fieldset>

                            <footer>
                                <button type="submit" class="btn btn-primary" onclick="javascript:saerch()">搜索 </button>
                            </footer>
                        </div>

                    </div>
                </div>
            </div>
        </article>
    </div>


    <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false" >
        <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>系统所有菜单列表 </h2>
        </header>
        <div>
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
            </div>
            <div class="widget-body no-padding">
                <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr>
                        <th data-class="phone,tablet">ID</th>
                        <th data-class="expand">名称</th>
                        <th data-hide="phone,tablet">编码</th>
                        <th data-hide="phone">请求地址</th>
                        <th data-hide="phone,tablet">上级菜单</th>
                        <th data-hide="phone,tablet">菜单类型</th>
                        <th data-hide="phone,tablet">备注信息</th>
                        <th data-hide="phone">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>

</section>
<script type="text/javascript">
    pageSetUp();

    var oTable = null;

    var addMenu = function(){
        openWindow('ajax/system/menu/menu-add.html','添加菜单',560,400,function(index,window){
            window.submit(index,function(data){
                opStateMsgTip(data,'添加成功');
                layer.close(index);
                search();
            });
        });
    };


    var pagefunction = function() {

        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "对不起，查询不到相关数据！",
            "sEmptyTable": "表中无数据存在！",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "sProcessing": "正在加载中......",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        var responsiveHelper_dt_basic = undefined;
        var responsiveHelper_datatable_fixed_column = undefined;
        var responsiveHelper_datatable_col_reorder = undefined;
        var responsiveHelper_datatable_tabletools = undefined;

        var breakpointDefinition = {
            tablet : 1024,
            phone : 480
        };

        oTable = $("#dt_basic").dataTable({
            language:lang, //提示信息
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'<'toolbar'>><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "autoWidth" : true,
            "preDrawCallback" : function() {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
                }
            },
            "rowCallback" : function(nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback" : function(oSettings) {
                responsiveHelper_dt_basic.respond();
            },
            autoWidth: true, //禁用自动调整列宽
            stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: false, //隐藏加载提示,自行处理
            serverSide: true, //启用服务器端分页
            searching: false, //禁用原生搜索
            orderMulti: false, //启用多列排序
            order: [], //取消默认排序查询,否则复选框一列会出现小箭头
            //renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
            //pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
            columns: [
                { "data": "id" },
                { "data": "name" },
                { "data": "code" },
                { "data": "url" },
                { "data": "parentName" },
                { "data": "menuDef" },
                { "data": "note" },
                { "data": "id" , "render":function(data, type, full, meta){
                    var tmp  ='<div class="btn-group-vertical">'
                            +'<a href="javascript:alert(&quot;'+data+'&quot;)" style="margin:auto 5px;">删除</a>'
                            +'<a href="javascript:alert(&quot;'+data+'&quot;)" style="margin:auto 5px;">修改</a>'
                            +'<div class="btn-group-vertical" style="margin:auto 5px;">                                                                                    '
                            +'	<a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">            '
                            +'		更多                                                                                            '
                            +'		<span class="caret"></span>                                                                         '
                            +'	</a>                                                                                               '
                            +'	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">                                  '
                            +'		<li role="presentation"><a href="javascript:alert(&quot;'+data+'&quot;)" role="menuitem" tabindex="-1">激活菜单</a></li>      '
                            +'		<li role="presentation" class="divider"></li>                                                       '
                            +'		<li role="presentation"><a href="javascript:alert(&quot;'+data+'&quot;)" role="menuitem" tabindex="-1">查看详情</a></li>           '
                            +'	</ul>                                                                                                   '
                            +'</div>                                                                                                    ';
                            +'</div>                                                                                                    ';

                    //return "<span style='color: red;'>"+data+"</span>";
                    return tmp;
                }}
            ],
            "columnDefs": [
               //{ classname: "hide_column", "targets": [ 0 ] }
            ],
            ajax: function (data, callback, settings) {
                var param = {};
                param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.page = (data.start / data.length) + 1;//当前页码
                param.requestUrl=$('#requestUrl').val();

                $.ajax({
                    type: "GET",
                    url: baseReqUrl.ibsmSystem+"/sys/menu/"+param.page+"/"+param.limit,
                    cache: false, //禁用缓存
                    data: param, //传入组装的参数
                    dataType: "json",
                    success: function (content) {
                        var result = content.result;
                        if(null != content.result){
                            var returnData = {};
                            returnData.draw=result.content;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.totalSize;//返回数据全部记录
                            returnData.recordsFiltered = result.totalSize;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.content;//返回的数据列表
                            callback(returnData);
                        }
                    }
                });
            }
        }).api();

        $("div.toolbar").html('<div class="text-left"><a class="btn btn-success" href="#ajax/system/menu/menu-add.html">新增</a></div>');
    };

    loadScript("js/plugin/datatables/jquery.dataTables.min.js", function(){
        loadScript("js/plugin/datatables/dataTables.colVis.min.js", function(){
            loadScript("js/plugin/datatables/dataTables.tableTools.min.js", function(){
                loadScript("js/plugin/datatables/dataTables.bootstrap.min.js", function(){
                    loadScript("js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
                });
            });
        });
    });
    /*var pagedestroy = function(){
     }
     pagefunction();*/


    function saerch(){
        //oTable.column( 0 ).visible( false );
        oTable.ajax.reload();
    }

</script>
